<!DOCTYPE html>
<html>
<head>
    <title>星级评分 - 3</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="../static/css/style.css">
</head>
<body>
<nav>
    <ul class="">
        <li><a href="index1.html">1.0版本</a></li>
        <li><a href="index2.html">2.0版本</a></li>
        <li><a href="#">3.0版本</a></li>
        <li><a href="index4.html">4.0版本</a></li>
        <li><a href="index5.html">5.0版本</a></li>
    </ul>
</nav>

<div class="info">
    <h2>星级评分3.0</h2>
    <p>改进：</p>
    <ul>
        <li>1. 采用发布订阅设计模式（trigger）</li>
        <li>2. 采用面向对象模式编写代码</li>
        <li>3. 每次划过/点击星星，控制台会显示当前是第几颗</li>
    </ul>
</div>

<ul class="rating" id="rating3-1">
    <!--star-width/height = 26px-->
    <li class="rating-item" title="很差"></li>
    <li class="rating-item" title="较差"></li>
    <li class="rating-item" title="一般"></li>
    <li class="rating-item" title="较好"></li>
    <li class="rating-item" title="很好"></li>
</ul>

<ul class="rating" id="rating3-2">
    <!--star-width/height = 26px-->
    <li class="rating-item" title="很差"></li>
    <li class="rating-item" title="较差"></li>
    <li class="rating-item" title="一般"></li>
    <li class="rating-item" title="较好"></li>
    <li class="rating-item" title="很好"></li>
</ul>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!--每次复制完html一定要修改下面的文件名啊啊啊啊-->
<script src="../static/js/index3.js"></script>
</body>
</html>